<template>
  <Layout desc="使用view-transition实现视图转换动画">
    <ul class="mt-20 text-center">
      <li v-for="i in datas">
        {{ i }}
        <el-button type="danger" @click="onDelete(i)">删除</el-button>
      </li>

      <el-button type="primary" @click="onAdd">添加</el-button>
    </ul>
  </Layout>
</template>

<script setup lang="ts">
const datas = ref(['apple', 'banana', 'orange', 'peach', 'pear'])

const onDelete = (item: string) => {
  document.startViewTransition(() => {
    datas.value = datas.value.filter(i => i !== item)
  })
}

const onAdd = () => {
  document.startViewTransition(() => {
    datas.value.push(`item${datas.value.length}`)
  })
}
</script>

<style scoped lang="scss">
li {
  width: 500px;
  height: 50px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
